<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <title>主页</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function load(){
        htmlobj = $.ajax({
            method:"POST",
            url:"http://139.199.210.127:8080/selectInfo",
            data:"",
            dataType:"json",
            success:function(data){
                var html = "";
                for(var i=0;i<data.length;i++){
                    var ls = data[i];
                    html+= "<table border='1' cellspacing='0'><tr> <td>序号 </td> <td>名称 </td><td>位置 </td> <td>关键字 </td> <td>类别 </td> <td>距离 </td> <td>特色产品 </td> <td>图片展示 </td> <td>操作1 </td> <td>操作2 </td></tr> <tr> <td id='val'>"
                        +ls.infoid+"</td> <td>"+ls.name+"</td> <td>"+ ls.location+" </td> <td>"+ ls.keyword+"</td> <td>"+ls.type+"</td> <td>"+ ls.distance+" </td> <td>"+
                        ls.product +"</td><td><img src='"+ ls.picture+"' height='40' width='40'/> </td><td><button onclick='postval("+ls.infoid+")'>修改</button> </td> <td> <button onclick='delval("+ls.infoid+")'>删除</button> </td> </tr> </table>";
                }
                //修改按钮的这个地方，我尝试过a href标签，但是发现不行，获取不到ls.infoid，这个问题我也不知道为什么。。
                $("#ulul").html(html);
            },
            error:function(){
                alert("error");
            }
        });
    }

    function postval(data1) {
        window.location.href="update.html?id="+data1;
    }

    function addInfo() {
        window.location.href="addInfo.html";
    }
    function delval(data2) {
        window.location.href="delete.html?id="+data2;
    }
</script>

<body onload="load()">
<div style="margin-left: 420px">
    <table border="1" cellspacing="0">
        <tr>
            <td>
                位置
            </td>
            <td>
                <select>
                    <option value="location">商洛学院</option>
                    <option value="type">商洛市</option>
                    <option value="distance">数计学院</option>
                    <option value="product">辅导员办公室</option>
                </select>
            </td>
            <td>
                类型
            </td>
            <td>
                <select>
                    <option value="location">美食</option>
                    <option value="type">风景</option>
                    <option value="distance">舒适</option>
                    <option value="product">宽敞</option>
                </select>
            </td>
            <td>
                距离
            </td>
            <td>
                <select>
                    <option value="location">1000米</option>
                    <option value="type">2000米</option>
                    <option value="distance">3000米</option>
                    <option value="product">4000米</option>
                </select>
            </td>
            <td>
                产品特色
            </td>
            <td>
                <select>
                    <option value="location">好吃</option>
                    <option value="type">便宜</option>
                    <option value="distance">好看</option>
                    <option value="product">香气扑鼻</option>
                </select>
            </td>
            <td>
                <button>搜索</button>
            </td>
            <td><button onclick="addInfo()">新增</button></td>
        </tr>
    </table>


</div>

<div id="ulul">

</div>


</body>
</html>